feat: Added React Demo webApp and deployment workflow by rockyRaccoon13 · Pull Request #73 · ni/systemlink-enterprise-examples

rockyRaccoon13 · 2026-02-12T00:17:37Z

Justification

Added a React demo web application using Vite to demonstrate how a customer might create a webApp and deploy it to SystemLink. The webApp demos how to call SystemLink APIs both in development (locally) and in production (within a SystemLink website).

The github actions webApp workflow automates building, linting, and deployment to the SystemLink website. The workflow also outputs a .nipkg artifact of the webApp to github. See /.github/workflows/webapp_deploy.yml

Implementation

Webapp Design
- The web app was created in TypeScript/React with nimble design components
- see examples/web_apps/Framework_Examples/React/ApiKeyAuthApp
Running in Development (locally) vs Production (hosted in SystemLink website)
- Environment (.env.development and .env.production) files allow variable domain for fetches (dev will fetch from the local proxy server, prod will fetch from the hosting website)
ApiServiceProxy -- Required to run web app locally
- To run in development, developers must call a SystemLink API URL with an API key
- A proxy is required in order to circumvent browser CORS issues
- The proxy also allows for API authentication in development and session
  token authentication when the web app is hosted in the SystemLink website
- Setup instructions for the proxy are included in ApiServiceProxy/README.md
Production -- Running inside SystemLink Website
- In production, the webApp will call the same APIs but from the hosting SystemLink website domain (instead of an API URL)
- Instructions for deploying the webApp to production are included in the ApiKeyAuthApp/README.md
- For developers, the deployment steps are also automated in ./deployDev.sh
Workflow -- Building, Linting, Deployment to SystemLink website
- Most of the workflow relies on npm scripts defined in a webApp's package.json (npm ci, npm lint, npm build).
  - This will work for any node.js project, but will need to change for future wasm apps such as blazor
    - Change will likely be using shell scripts instead of package manager scripts
- Each webApp folder must be added to the job matrix to be included in the script
SystemLink CLI (SL CLI) integration in Workflow
- The SL CLI was installed into the workflow by using brew (brew was provided on the github-runner, but needed to be added to the env path)
- The SL CLI allows for:
  - Packaging a webApp into an .nipkg file
  - Deploying to a user's workspace
- Github Secrets
  - The workflow includes secrets which will allow any developer to copy the workflow and use it for CI/CD
  - Required secrets for the workflow:
    - SL_API_URL
    - SL_API_KEY
    - SL_WEBSITE_URL
    - SL_WORKSPACE

Testing

Local env
- The webApp was run locally on a few devices using the proxy server and successfully called the API.
Within SystemLink website
- The webApp was also successfully deployed to SystemLink website, where it was able to call the API for the logged in user.
Workflow
- The workflow was tested a couple of times on pushes to our fork's devOps branch. The workflow successfully built, packaged, and deployed the web application!

Checklist

I have read and followed the Contributing Guidelines

…stemlink-enterprise-examples-fork into BYU-Development

…selves

jattasNI · 2026-02-13T23:09:13Z

@rockyRaccoon13 let's review this PR and #72 together at our next meeting. To other repo owners, no need to review these PRs yet, I'll help the team iterate on them first.

jattasNI

Here's my first batch of feedback. Overall it's going in a good direction: I was able to build the app locally and make the API call, which is a success for your implementation and your docs.

This feedback is mostly about docs and infrastructure high level organization and app capabilities. Once we get that dialed in I'll get finer grained on code.

README.md

.gitignore

.github/workflows/webapp-deploy.yml

examples/Web Applications/Framework Examples/React/ApiKeyAuthApp/eslint.config.js

examples/web_apps/Framework_Examples/React/ApiKeyAuthApp/src/.gitignore

jattasNI · 2026-02-18T23:42:20Z

examples/Web Applications/Framework Examples/React/ApiKeyAuthApp/src/App.css

@@ -0,0 +1,208 @@
+/* @use '@ni/nimble-components/dist/fonts' as *;


Let's remove commented out code to reduce clutter.

Could you also take a pass at consistent spacing (avoid lots of repeated newlines, use consistent spaces after CSS selectors)?

jattasNI · 2026-02-18T23:50:47Z

examples/Web Applications/Framework Examples/React/ApiKeyAuthApp/src/App.css

+  background-color: #f5f5f5;
+  overflow-y: auto;
+  margin: 0; 
+  font-family: var(--nimble-font-family-body);


It doesn't look like this is working. If I inspect in dev tools it says these variables are not set.

I suspect the issue is that you need to import tokens like the Nimble react example app does. It also imports fonts in the app wide index.scss file, not sure if that's needed too.

jattasNI · 2026-02-18T23:52:36Z

examples/Web Applications/Framework Examples/React/ApiKeyAuthApp/src/App.css

@@ -0,0 +1,208 @@
+/* @use '@ni/nimble-components/dist/fonts' as *;


Does React have a configuration that lets you use SCSS instead of CSS? We tend to prefer SCSS because it gives better compile-time checking of variable names.

If there's not an obvious / cheap way to do this, I'm ok to defer it to a follow up task.

Vite definitely does out of the box, the nimble react-client-app would be a good example:
https://github.com/ni/nimble/tree/main/packages/react-workspace/react-client-app
https://github.com/ni/nimble/blob/main/packages/react-workspace/react-client-app/src/index.scss

nimble went with @vitejs/plugin-react-swc which skips babel and is super fast with a tradeoff of a bunch of compile checks instead of @vitejs/plugin-react but either way SCSS should be supported

Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>

amur-bashirov and others added 30 commits January 21, 2026 11:09

Update README title for BYU team branch

a86a545

created React Demo

c69f6ff

Amur's React + Vite default app

e41f690

Rename React app folder

125eae9

Created folders to begin developing

6872ffb

Merge branch 'BYU-Development' of https://github.com/Samuelsotogit/sy…

d7c15cb

…stemlink-enterprise-examples-fork into BYU-Development

put react empty app into web-apps folder

cd99b03

Update Nimble package

dd5b89e

Remove default React buttons

0022308

Added NI icon to the page

f62b9bc

added buttons colors

684e857

Co-authored-by: Bowen Liu <reouct@users.noreply.github.com>

91d5c64

new path and css

0a24153

put a placeholder for config.js

85d83b1

changed it to the typescript

b1de94a

put a placeholder for config

df1b8ce

unable to use secrets not in pipline, reversed the proccess back

71bb8d2

pit config.ts into gitignore

fa85069

tried to put it one more time

51d0af9

changed config back

5a10fcc

Stop tracking config.ts

dff043c

push to delete config.ts

9bc4478

deleted dem_config

6b4de7c

finished creating demo config

9626c3b

finished config file and demo config file

07aca10

defined div for api call

3fc1884

finished css for button and api

acef4c6

defined first div and title for the example css

3084d50

Set Up README.md on top and lower levels within the repo

a2c4e9d

Merge branch 'BYU-Development' of https://github.com/Samuelsotogit/sy…

5026d57

…stemlink-enterprise-examples-fork into BYU-Development

rockyRaccoon13 and others added 14 commits February 13, 2026 10:52

rm(junk Readme_files folder)

6006bac

added green box border

f737b36

edit(README) edit web_app examples

057cea9

added green box border

f8a6374

Merge branch 'main' into React

8090b68

added padding

9dc7710

changed the titles for the links

af2732f

changed all the divs inside the header to make the tabs as links them…

c22cbb3

…selves

renamed title component to make css easier to work with

3611ec8

polished design for links

e6ca6f7

added logos folder

f62fceb

clean up(bad files)

adc2147

remove react logo

bdfdfa2

delete font files

44a7753

jattasNI self-requested a review February 13, 2026 23:07

Merge remote-tracking branch 'origin/NewReact' into React

fd194aa

rockyRaccoon13 changed the title ~~Added workflow to build and deploy react WebApp examples~~ Added React Demo webApp and deployment workflow Feb 18, 2026

rockyRaccoon13 changed the title ~~Added React Demo webApp and deployment workflow~~ feat: Added React Demo webApp and deployment workflow Feb 18, 2026

jattasNI requested changes Feb 19, 2026

View reviewed changes

rockyRaccoon13 and others added 10 commits February 18, 2026 18:52

Update README.md edit letter casing

2550523

Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>

Update .gitignore -- removed .net ignores

500e5d7

change web app folder names to match casing

26ec764

move .gitignore to parent folder (1 per project)

7528064

Update .github/workflows/webapp-deploy.yml

d65a7dc

Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>

fixed eslint config (app ts/tsx, js, and vite errors)

fedfca4

fix basic linting errors

6295d5d

changed term website to env to refer to SL UI env

ee663e5

change package.json meta

31cfc8d

updated readme for service proxy

60dd345

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: Added React Demo webApp and deployment workflow#73

feat: Added React Demo webApp and deployment workflow#73
rockyRaccoon13 wants to merge 159 commits intoni:mainfrom
Samuelsotogit:devOps/CI_CD

rockyRaccoon13 commented Feb 12, 2026 •

edited

Loading

Uh oh!

jattasNI commented Feb 13, 2026

Uh oh!

jattasNI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jattasNI Feb 18, 2026

Uh oh!

jattasNI Feb 18, 2026

Uh oh!

jattasNI Feb 18, 2026

Uh oh!

rajsite Feb 20, 2026

Uh oh!

rajsite Feb 20, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

		@@ -0,0 +1,208 @@
		/* @use '@ni/nimble-components/dist/fonts' as *;

Comments

Conversation

rockyRaccoon13 commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Justification

Implementation

Testing

Checklist

Uh oh!

jattasNI commented Feb 13, 2026

Uh oh!

jattasNI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jattasNI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

jattasNI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

jattasNI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

rajsite Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

rajsite Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

rockyRaccoon13 commented Feb 12, 2026 •

edited

Loading

rajsite Feb 20, 2026 •

edited

Loading